<template>
  <div>
    <div class="board">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bill-management-container">
      <div style='padding:8px 0px'>
        <el-row :gutter="24">
          <el-col :span="4" >
            <el-input v-model="pageData.searchText" placeholder="搜索用户"autocomplete="off" />
          </el-col>
          <el-col :span="2">
            <el-button type="success"  @click='handerSearch'>查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="pageData.records" style="width: 100%":header-cell-style="{background: '#800000'}">
        <el-table-column label="姓名" width="150" header-align="center" align="center">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>姓名: {{ scope.row.userName }}</div>
                <div>性别: {{ formatSex(scope.row.sex) }}</div>
                <div>生日: {{ scope.row.birthday }}</div>
                <div>角色: {{ formatRole(scope.row.roleId) }}</div>
                <div>个性签名: {{ scope.row.autograph }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.userName }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="邮箱" width="200" header-align="center" align="center"  >
          <template #default="scope" >
            <div style="display: flex; align-items: center; justify-content: center">
              <span>{{ scope.row.email }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="200" header-align="center" align="center"style=" color:black">
          <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: center">
              <span>{{ scope.row.phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="100" header-align="center" align="center">
          <template #default="scope">
            <span>{{ formatSex(scope.row.sex) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="150" header-align="center" align="center">
          <template #default="scope">
            <span>{{ formatRole(scope.row.roleId) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作"header-align="center" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
                size="small"
                plain
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="pageData.current"
            v-model:page-size="pageData.size"
            :page-sizes="[10, 20, 30, 40]"
            :size="pageData.size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      <!--删除确认对话框-->
      <el-dialog
          v-model="deleteDialogVisible"
          title="删除提示"
          width="500"
          :before-close="handleClose"
      >
        <span>确认要删除这个数据吗？</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmDelete">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--新增-->
      <el-dialog v-model="addDialogVisible" title="新增" width="500">
        <el-form :model="addObj">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="addObj.userName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="addObj.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="addObj.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="addObj.sex">
              <el-radio :label="1" size="large">男</el-radio>
              <el-radio :label="0" size="large">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="addObj.roleId" placeholder="请选择角色">
              <el-option
                  v-for="role in roleList"
                  :key="role.roleId"
                  :label="role.roleName"
                  :value="role.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth">
            <el-date-picker v-model="addObj.birthday" type="date" placeholder="选择出生日期" value-format="YYYY-MM-DD"/>
          </el-form-item>
          <el-form-item label="个性签名" :label-width="formLabelWidth">
            <el-input v-model="addObj.autograph" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handlerAddCancel">取消</el-button>
            <el-button type="primary" @click="handlerAdd">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!--编辑-->
      <el-dialog v-model="editDialogVisible" title="编辑" width="500">
        <el-form :model="editObj">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="editObj.userName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="editObj.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="editObj.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="editObj.roleId" placeholder="请选择角色">
              <el-option
                  v-for="role in roleList"
                  :key="role.roleId"
                  :label="role.roleName"
                  :value="role.roleId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handlerEditCancel">取消</el-button>
            <el-button type="primary" @click="handlerEditCommit">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import api from '../api'//@
import lodash from 'lodash'
const radio1 = ref('1')
const pageData=ref({
  records:[],
  total:0,
  size:10,
  current:1,
  pages:1,
  searchText:''
});
const roleList = ref([
  { roleId: 1, roleName: '管理员' },
  { roleId: 2, roleName: '普通用户' }
]);

const formatSex = (sex) => {
  return sex === true ? '男' : sex === false ? '女' : '未知'
}
const formatRole = (roleId) => {
  const role = roleList.value.find(item => item.roleId === roleId);
  return role ? role.roleName : '未知'
}
const handerSearch=()=>{
  pageData.value.current=1;
  getTableList();
}
const deleteDialogVisible=ref(false);
const deleteObj=ref({
  userId:'',
  index:-1
});
//组件挂载后执行的钩子函数
onMounted( function (){
  getTableList();
});
const addDialogVisible=ref(false);
const addObj=ref({
  userName:'',
  email:'',
  phone:'',
  sex:1,
  roleId: 2, // 默认普通用户
  birthday:'',
  autograph:''
});
//获取表格数据
const getTableList = async () => {
  const page = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchText:pageData.value.searchText
  }
  if(!page.searchText){
    page.searchText="";
  }
  const result = await api.getUserPage(page);
  pageData.value = result;
  pageData.value.searchText=page.searchText;
}
const handlerAddCancel=()=>{
  addObj.value.userName="";
  addObj.value.email="";
  addObj.value.phone="";
  addObj.value.sex="";
  addObj.value.roleId=2;
  addObj.value.birthday="";
  addObj.value.autograph="";
  addDialogVisible.value=false;
}
const handlerAdd=async ()=>{
  await api.addUser(addObj.value);
  getTableList();
  addDialogVisible.value=false;
}
const editDialogVisible=ref(false);
const editObj=ref({
  userId:'',
  userName:'',
  email:'',
  phone:'',
  roleId: 2
});
const handleEdit = (index, row) => {
  //显示对话框--绑定数据
  editDialogVisible.value=true;
  editObj.value=lodash.clone(row);
}
const handlerEditCancel=()=> {
  editDialogVisible.value = false;
}
const handlerEditCommit=async () => {
  await api.editUser(editObj.value);
  getTableList();
  editDialogVisible.value=false;
}
const handleDelete =(index, row) => {
  deleteObj.value.userId=row.userId;
  deleteObj.value.index=index;
  deleteDialogVisible.value=true;
}
const confirmDelete=async ()=>{
  await api.deleteUser(deleteObj.value.userId);
  pageData.value.records.splice(deleteObj.value.index,1);
  getTableList();
  deleteDialogVisible.value=false;
}
//改变分页行数
const handleSizeChange = (val) => {
  pageData.value.size=val;
  getTableList();
}
//改变当前页码
const handleCurrentChange = (val) => {
  pageData.value.current=val;
  getTableList();
}
</script>
<style>
.bill-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.el-table {
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
</style>